<template>
  <div class="login-wrapper d-flex justify-content-center bg-dark">
    <div class="login-center bg-white rounded p-3">
      <div class="mb-4 d-flex flex-column align-items-center">
        <div class="d-flex align-items-center">
          <Icon type="md-briefcase" size="55" color="#2db7f5" />
          <h3 class="text-muted ml-2">企业网盘</h3>
        </div>
        <span class="text-muted small mt-3">企业级网盘解决方案</span>
      </div>
      <Form ref="formItem" :label-width="0" :model="formItem" :rules="rules">
        <FormItem prop="username">
          <Input
            v-model="formItem.username"
            placeholder="请输入用户名..."
          ></Input>
        </FormItem>
        <FormItem prop="password">
          <Input
            type="password"
            v-model="formItem.password"
            placeholder="请输入密码..."
          ></Input>
        </FormItem>
        <!-- 注册确认密码 -->
        <FormItem prop="repassword" v-if="type === 'reg'">
          <Input
            type="password"
            v-model="formItem.repassword"
            placeholder="请输入确认密码..."
          ></Input>
        </FormItem>
        <div class="d-flex align-items-center mb-2">
          <Checkbox v-model="formItem.remember">自动登录</Checkbox>
          <a href="#" class="ml-auto small">忘记密码?</a>
          <span class="mx-1">|</span>
          <a href="#" class="small" @click="changeType">{{
            type == "login" ? "注册账户" : "立即登录"
          }}</a>
        </div>
        <FormItem>
          <Button type="primary" long @click="handleSubmit">{{
            type == "login" ? "登 录" : "注 册"
          }}</Button>
        </FormItem>
      </Form>
    </div>
  </div>
</template>
 ​
 <script>
import { userRegistered,login } from "../api/user";
export default {
  data() {
    return {
      formItem: {
        username: "",
        password: "",
        remember: false,
        repassword: "",
      },
      type: "login",
      rules: {
        username: [
          {
            required: true,
            message: "请输入用户名...",
            trigger: "blur",
          },
          {
            type: "string",
            min: 5,
            message: "密码长度不能小于5位",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码...",
            trigger: "blur",
          },
          {
            type: "string",
            min: 6,
            message: "密码长度不能小于6位",
            trigger: "blur",
          },
        ],
        repassword: [
          {
            required: true,
            message: "请再次输入密码...",
            trigger: "blur",
          },
          {
            type: "string",
            min: 6,
            message: "密码长度不能小于6位",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    handleSubmit() {
      this.$refs['formItem'].validate(async(valid) => {
        if (valid) {
          if(this.type == 'reg'){
            if(this.formItem.password == this.formItem.repassword){
              // 调用注册接口
              // const{data:res} = await userRegistered(this.formItem)
              // console.log(res);
              // if(res.msg == 'ok'){
              //   this.$Message.success('注册成功')
              // }else{
              //   this.$Message.error('该用户已存在')
              // }
              userRegistered(this.formItem).then(response=>{
                if(response.data.msg == 'ok'){
                  this.$Message.success('注册成功')
                  this.type = 'login'
                }
              }).catch(error=>{
                console.log(error.response.data.data);
                this.$Message.error(error.response.data.data);
              })
            }else{
              this.$Message.error('两次输入密码不一致');
            }
          }else{
            // 调用登录接口
            this.$store.dispatch('login',this.formItem).then(res=>{
              if(res.data.msg == 'ok'){
                this.$Message.success('登陆成功')
                this.$router.push('/index')
              }
            }).catch(error=>{
              this.$Message.error(error.response.data.data);
            })
          }
        } else {
          this.$Message.error("Fail!");
        }
      });
    },
    //注册与登录的类型切换
    changeType() {
      this.type = this.type == "login" ? "reg" : "login";
      console.log(this.type);
    },
  },
};
</script>
 ​
<style scoped="scoped">
.login-wrapper {
  height: 100%;
}

.login-center {
  width: 380px;
  margin-top: 50px;
  height: max-content;
}
</style>